.extend-field-wrap-component {

  .extend-field-content {
    width: 1120px;
    .extend-field-content-left {
      min-height: 400px;
      width: 570px;
      .extend-field-title {
        font-size: 16px;
        font-weight: 500;
        line-height: 40px;
      }
      .list-drag-wrap {
        overflow: hidden;
        position: relative;
      }
      .list-drag-inner-wrap {
        position: relative;
        margin-bottom: 80px;
      }
      //dragable item
      .field-item {
        height: 40px;
        line-height: 40px;
        margin-bottom: 4px;
        cursor: pointer;
        width: 560px;
        margin-left: 5px;
        .left-field-item-index{
          height: 34px;
          width: 122px;
          line-height: 34px;
          cursor: pointer;
          margin-top: 3px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-right: 8px;
        }
        .left-field-item-title {
          height: 40px;
          width: 160px;
          text-align: right;
          padding-right: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .left-field-item-inp {
          height: 34px;
          border: solid 1px $form-border;
          width: 200px;
          line-height: 34px;
          cursor: pointer;
          padding-left: 10px;
          margin-top: 3px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .close-btn {
          width: 45px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: gainsboro;
        }
        .close-btn:hover {
          color: $default-color-hover;
        }
      }
      //dragable item when onhover
      .field-item:hover {
        background: $highlight-default;
      }
      //dragable item when active
      .field-item-active {
        .left-field-item-title {
          height: 40px;
          width: 160px;
          text-align: right;
          padding-right: 10px;
          border-left: solid 4px $default-color;
        }
      }
      //dragable item when draging
      .field-item.list-drag-selected {
        background: $highlight-selected;
        cursor: pointer;
        box-shadow: 0px 0px 4px 2px #E6E6E6;
      }

    }
    .extend-field-content-right {
      min-height: 400px;
      width: 450px;
      padding-left: 20px;
      border-left: solid 1px $form-border;
      margin-left: 55px;
      .extend-field-title {
        font-size: 16px;
        font-weight: 500;
        line-height: 40px;
      }
      .field-list {
        .field-list-item {
          float: left;
          height: 36px;
          line-height: 36px;
          margin-right: 10px;
          margin-bottom: 10px;
          padding-left: 12px;
          padding-right: 12px;
          border: solid 1px $form-border;
          cursor: pointer;
        }
        .field-list-item:hover {
          border: solid 1px $default-color-hover;
          color: $default-color-hover;
        }
      }
      .field-active {
        margin-top: 20px;
      }
    }
  }
  .extend-field-btn-wrap {
    margin-top: 16px;
  }
}


